<template>
<div class="heard-z" v-if="title!=='首页'" @click="setSeach()">   
 
</div >   
    <div @click="setSeach()" class="heard heard-home" :class="{
        'heard-active':type && !store.homeShow || route.meta.isVip, 
        'heard-info-color':route.meta.isInfo,
        'heard-info-vip':route.meta.isVip
        }">  
        <div class="heard-left">  
            <heardLeft :type="type" :title="title"/>     
        </div>   
        <div class="heard-right">  
            <heardRight :type="type" @seachExbit="seachExbit"/>  
        </div> 
    </div>  
</template>

<script setup lang="ts">
// @ts-nocheck
import heardLeft from "./heardLeft.vue" 
import heardRight from "./heardRight.vue"
import {ref,watch} from "vue"
import {useRoute} from "vue-router"
import heardRightVue from "./heardRight.vue"
import { useProjectStore } from '@/store';


const store = useProjectStore();
const emit=defineEmits(['seachs']) 
const type=ref(true)
const title=ref('首页')
const route=useRoute()
type.value=route.meta.isHome
title.value=route.meta.title
watch(route,()=>{
    
type.value=route.meta.isHome
title.value=route.meta.title
},{deep:true})

const seachExbit=()=>{
    emit('seachs')
}
const setSeach=()=>{
    
    store.setseachType() 
}
</script>
 
<style lang="less" scoped>
@import "./ignore.less"; 
.heard-info-color{ 
    background:rgba(31, 31, 31, 1) ;
    box-shadow: inset 0px -1px 0px 0px #434343; 
} 
.heard-info-vip{
    background: rgba(255, 248, 247, 1) !important;
    box-shadow: none;
}
</style>